<template>
    <div>
        <div class="">
            <el-button @click="start" type="primary">查询</el-button>
            <el-button @click="add" type="primary">新增</el-button>
        </div>
        <el-table v-loading="loading" class="margin-top20" ref="multipleTable" border :data="tableData" height="74vh"
            style="width: 100%">
            <el-table-column prop="ID" label="ID" width="60"> </el-table-column>
            <el-table-column prop="name" label="名称"> </el-table-column>
            <el-table-column prop="model" label="model"> </el-table-column>
            <el-table-column prop="description" label="描述" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="baseURL" label="baseURL" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="key" label="key" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="maxtoken" label="maxtoken"> </el-table-column>
            <el-table-column prop="" label="操作" width="150">
                <template #default="{ row }">
                    <el-button-group>
                        <el-button type="danger" @click="del(row?.ID)">删除</el-button>
                        <el-button type="primary" @click="update(row)">修改 </el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="pager" :page-size="limit" :total="totalCount" @current-change="changePage"
            layout="total,prev, pager, next" :current-page="Math.floor(offset / limit) + 1">
        </el-pagination>
        <!--  -->
        <el-dialog v-model="dialogVisible" width="600" @close="close">
            <template #header>
                <span class="icon-text el-dialog__header-title">
                    <el-icon class="text-primary">
                        <Guide />
                    </el-icon>
                    {{ isUpdate ? '修改' : '新增' }}模型
                </span>
            </template>
            <el-form ref="formDataRef" :model="formData" :rules="rules" status-icon label-width="auto"
                class="demo-formData">
                <el-form-item label="名称" prop="name">
                    <el-input v-model.trim="formData.name" />
                </el-form-item>
                <el-form-item label="model" prop="model">
                    <el-input v-model.trim="formData.model" />
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model.trim="formData.description" />
                </el-form-item>
                <el-form-item label="baseURL" prop="baseURL">
                    <el-input v-model.trim="formData.baseURL" />
                </el-form-item>
                <el-form-item label="key" prop="key">
                    <el-input v-model.trim="formData.key" />
                </el-form-item>
                <el-form-item label="maxtoken" prop="maxtoken">
                    <el-input-number v-model.number="formData.maxtoken" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" size="default" @click="submit">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
import { computed, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { asyncCreateorupdatemodel, asyncDelmodel, asyncSelectmodel } from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";

const router = useRouter()
const route = useRoute()
const store = useStore(Storekey)

onMounted(() => { start() })

const loading = ref(false)
// 查询条件
const offset = ref<number>(0)
const limit = ref<number>(20)
const totalCount = ref<number>(0)
const tableData = ref<Studycodemodel.Ichatmodel[]>([])
async function start() {
    try {
        loading.value = true
        const { rows, count } = await asyncSelectmodel({
            _offset: offset.value,
            _limit: limit.value,
            _sortable: "DESC"
        })
        loading.value = false
        totalCount.value = count
        tableData.value = rows
    } catch (error) {
        console.error(error)
    }
}
function changePage(r: number) {
    offset.value = (r - 1) * limit.value
    start()
}

async function del(ID: number) {
    try {
        ElMessageBox.confirm(`确定删除此AI模型?`, '提示', {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(async e => {
            await asyncDelmodel({ ID })
            start()
            ElMessage.success("操作成功")
        }).catch(f => {
            ElMessage.error(f)
        })

    } catch (error) {
        console.error(error)
    }
}

const dialogVisible = ref(false)
function close() {
    formDataRef.value?.clearValidate()
}
const formDataRef = ref<FormInstance>()
const formData = ref<Studycodemodel.Ichatmodel>({})
const isUpdate = computed(() => {
    return formData.value?.ID
})
const rules = reactive<FormRules<typeof formData>>({
    name: [{ required: true, message: '名称为必填', trigger: 'blur', },],
    baseURL: [{ required: true, message: 'baseURL为必填', trigger: 'blur', },],
    key: [{ required: true, message: 'key为必填', trigger: 'blur', },],
})
async function submit() {
    formDataRef.value?.validate(async (valid) => {
        if (valid) {
            try {
                await asyncCreateorupdatemodel(formData.value)
                start()
                ElMessage.success("操作成功")
                dialogVisible.value = false
            } catch (error) {
                console.error(error)
            }
        } else {
            console.log("表单验证失败=>", formData.value)
        }
    })
}

function add() {
    dialogVisible.value = true
    formData.value = {}
}

async function update(row: Studycodemodel.Ichatmodel) {
    dialogVisible.value = true
    formData.value = row
}

</script>

<style scoped>
.router-link-active {
    color: cadetblue;
}
</style>